<template>
  <div class="home">
    <el-carousel indicator-position="outside" height="250px">
      <el-carousel-item v-for="item in banner" :key="item.id">
        <el-image style="width: 100%" :src="item.url" fit="cover"> </el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="shop">
      <div class="shoptitle">
        贫困问题是当今世界面临的最大挑战之一，消除贫困是人类的共同理想。扶贫工作旨在帮助贫困地区和贫困户开发经济、发展生产、摆脱贫困，改变穷困面貌。党的十八大以来，党中央团结带领全党全国各族人民，把脱贫攻坚摆在治国理政突出位置，充分发挥党的领导和中国特色社会主义制度的政治优势，采取了许多具有原创性、独特性的重大举措，经过8年持续奋斗，我国如期完成脱贫攻坚目标任务，消除了绝对贫困和区域性整体贫困。对此，我们要加强精准扶贫，加速世界减贫进程，为全球减贫事业贡献中国力量；回应贫困治理难题，为促进人类可持续发展提供中国样本。
      </div>
      <div class="shoptitle">
        该扶贫公益网站旨在为更多贫困人口提供资助通道，更多贫困家庭提供脱贫机会，通过发布更多相关资讯和产品实现精准扶贫，减小城乡区域发展差距。
      </div>
      <div class="flex">
        <div class="flex_title">扶贫商品</div>
        <div class="flex_more" @click="shopmore">
          查看更多 <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <el-row :gutter="30">
        <el-col
          :xs="12"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="6"
          v-for="(item, index) in tableData"
          :key="index"
          @click.native="details(item.id)"
        >
          <el-card
            shadow="always"
            :body-style="{ padding: '0px' }"
            style="margin-top: 20px"
          >
            <el-image :src="item.url" class="image" fit="cover"> </el-image>
            <div style="padding: 14px">
              <span>{{ item.name }}</span>
              <div class="bottom">
                <div class="time">￥ {{ item.price }}</div>
                <el-button type="text" class="button">购买</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="flex">
        <div class="flex_title">新闻公告</div>
        <div class="flex_more" @click="newsmore">
          查看更多 <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <el-row style="margin-top: 20px" :gutter="20">
        <el-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="11"
          :xl="11"
          v-for="(item, index) in list"
          :key="index"
          class="teach_item"
          @click.native="bindteach(item.id)"
        >
          <el-row>
            <el-col :span="20">
              <div class="item_center">
                <div class="center_title">{{ item.name }}</div>
                <div class="center_info">{{ item.descr }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item_right">
                <el-image
                  style="width: 100%; height: 90px"
                  :src="item.url"
                  fit="cover"
                >
                </el-image>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-backtop></el-backtop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      tableData: [],
      userID: "",
      banner: [],
      list: [],
    };
  },
  created() {
    this.banners();
    this.sale();
    this.article();
  },
  methods: {
    banners() {
      this.$http
        .postRequest("main/banner/show/list", {
          pNum: 1,
          pSize: 10,
        })
        .then((res) => {
          // console.log(res.data);
          if (res.code === 0) {
            this.banner = res.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    article() {
      this.$http
        .postRequest("main/article/show/list", {
          type: 0,
          pNum: 1,
          pSize: 6,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code === 0) {
            this.list = res.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    bindteach(event) {
      console.log(event);
      this.$router.push({
        path: "/newsdetails",
        query: {
          id: event,
        },
      });
    },
    //详情
    details(event) {
      console.log(event);
      this.$router.push({
        path: "/shopdetails",
        query: {
          id: event,
        },
      });
    },
    //列表
    sale() {
      this.$http
        .postRequest("main/sale/show/list", {
          search: "",
          pNum: 1,
          pSize: 8,
        })
        .then((res) => {
          // console.log(res.data);
          if (res.code === 0) {
            this.tableData = res.data;
            this.total = res.totalSize;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    shopmore() {
      this.$router.push("/shop");
      this.$bus.$emit("test", "/shop");
    },
    newsmore() {
      this.$router.push("/news");
      this.$bus.$emit("test", "/news");
    },
  },
};
</script>

<style scoped>
.shop {
  width: 80%;
  margin: auto;
  padding-bottom: 30px;
}

.shoptitle {
  line-height: 1.8;
  text-indent: 2rem;
  font-size: 18px;
  margin-top: 30px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}

.flex_title {
  font-size: 20px;
  font-weight: 600;
}

.flex_more {
  color: #aeaeae;
}

.time {
  font-size: 13px;
  color: #999;
  padding: 10px 0;
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* .teach_item:hover {
		border: 1px solid #425994;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
		cursor: pointer
	}
	
	.teach_item:hover .arrow {
		background: #425994;
		color: #FFFFFF;
	} */

.teach_item {
  /* margin: 13px 20px; */
  margin: 20px;
  padding-left: 20px;
  padding-top: 23px;
  padding-bottom: 26px;
  border: 1px solid #eeeeee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.center_title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.center_info {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #535353;
  margin-top: 21px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.item_right {
  text-align: center;
  position: relative;
}
</style>
